<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="style.css">
		<link rel="stylesheet" href="message_style.css">
		<link rel="stylesheet" href="topbar.css">
		<script src="wirc.js"></script>
	</head>

	<body>
		<!-- templates -->
		<div id="templates">

			<div class="server-channels">
				<div class="server room">
					<div class="content-item"></div>
					<div class="remove-button">-</div>
				</div>
				<ul class="channels"></ul>
			</div>

			<li class="channel room">
				<div class="content-item"></div>
				<div class="remove-button">-</div>
			</li>

			<ul class="nicks"></ul>

			<li class="nick">
				<div class="content-item"></div>
			</li>

			<ul class="messages"></ul>

			<li class="message">
				<div class="timestamp"></div>
				<div class="source-content-container">
					<div class="source"></div>
					<div class="content"></div>
				</div>
			</li>

		</div>

		<!-- main -->
		<div id="main">
			<div id="main-top-border"></div>
			<div id="rooms-and-nicks" class="no-nicks">
				<div id="rooms-container">
					<h1>rooms</h1>
					<div class="rooms"></div>
				</div>
				<div id="nicks-container">
					<h1>members</h1>
				</div>
			</div>

			<div class="dragbar"></div>

			<div id="messages-and-input">
				<div id="topic-container">
					<button id="hide-channels" class="topbar-button">=</button>
					<div id="status" class="content-item"></div>
				</div>
				<div id="notice" class="hide">
					<div class="content"></div>
					<button class="close">X</button>
					<button class="option2 hidden"></button>
					<button class="option1 hidden"></button>
				</div>
				<div id="messages-container"></div>
				<div id="nick-and-input">
					<div id="nick"></div><input id="input">
				</div>
			</div>
		</div>
	</body>
</html>
